<!-- 我正在开发 我是王运 QQ：1966908862 昵称：Coffee。cup -->
<template>
	<!-- 重置用此页面 -->
	<view v-if="is_rev == '1'||is_rev == '0'">
		<!-- 添加头像部分 -->
		<view v-if="is_rev == '0'" class="container">
			<image class="userinfo-avatar" :src="head_img_src" @click="addImg"></image>
			<text class="text_hint" v-show="is_select">新增头像</text>
		</view>
		<view v-else class="container">
			<image class="userinfo-avatar" :src="value_rev.photo_id" @click="addImg"></image>
			<text class="text_hint" v-show="is_select">重置头像</text>
		</view>
		<!-- 选择角色部分 -->
		<view class="formItem">
			<radio-group @change="radioChange">
				<label class="radio">角色</label>
				<label class="radio">
					<radio value="0" :checked="is_checked" />
					管理员
				</label>
				<label class="radio">
					<radio value="10" :checked="!is_checked" />
					工作人员
				</label>
			</radio-group>
		</view>
		<!-- 账号密码部分 -->
		<view>
		<form v-if="is_rev == '1'" class="form" @submit="formSubmit" @reset="formReset">
			<input class="formItem" name="text" :value="value_rev.name" placeholder="输入账户名称" />
			<input class="formItem" name="password" placeholder="重置密码" />
			<!-- 提交按钮 -->
			<button class="formItem submit" form-type="submit">保 存</button>
		</form>
		<!-- 账号密码部分 -->
		<form v-else class="form" @submit="formSubmit" @reset="formReset">
			<input class="formItem" name="text" placeholder="输入账户名称" />
			<input class="formItem" password="true" name="password" placeholder="设置密码" />
			<!-- 提交按钮 -->
			<button class="formItem submit" form-type="submit">提 交</button>
		</form>
		</view>
	</view>
	<!-- 修改密码用此页面 -->
	<view v-else>
		<!-- 显示信息 头像、用户名 -->
		<view class="container">
			<image class="userinfo-avatar" :src="value_rev.photo_id" @click="addImg"></image>
			<text class="text_hint">{{ value_rev.name }}</text>
		</view>

		<!-- 账号密码部分 -->
		<form class="form" @submit="formSubmit" @reset="formReset">
			<input class="formItem" name="password" placeholder="请输入旧密码" />
			<input class="formItem" name="re_password" placeholder="请输入新密码" />
			<!-- 提交按钮 -->
			<button class="formItem submit" form-type="submit">提 交</button>
		</form>
	</view>
	
	
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
// 初始化 uniCloud
import app from '@/common/app.js';
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			head_img_src: '/static/tx.png',
			image_srces: '/static/tx.png',
			is_select: true,
			checked_vakue: '工作人员',
			is_checked: false, //默认新增工作人员
			is_rev: '0', //是否为重置
			value_rev: '', //如果为重置，保存之前的数据
			imgData: '', //判断是否会选择同一张图片
			nameReg: /^.{2,16}$/,
			pwdReg: /^.{4,30}$/,
			//表单验证数据
			rules: {
				name: [{ required: true, message: '用户名不能为空', trigger: 'change' }, { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }],
				password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, { min: 4, max: 30, message: '长度在 4 到 30 个字符', trigger: 'blur' }]
			}
		};
	},
	methods: {
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			// console.log('打印出上个页面传递的参数。45', option); //打印出上个页面传递的参数。
			if (option.is_re == 1) {
				//如果是重置，保存上一个页面数据
				this.is_rev = '1';
				this.value_rev = option;
				if (option.role == '0') {
					//更改默认角色的值
					this.is_checked = true;
					this.checked_vakue = '0';
				}
			} else if (option.is_re == 2) {
				//是否更改密码
				this.is_rev = '2';
				this.value_rev = uni.getStorageSync('user_info');
				// console.log(this.value_rev); //打印出参数。
			}
		},
		// 后退
		back() {
			uni.navigateBack();
		},
		//单选组监听
		radioChange(e) {
			// console.log('单选框监听：', e.detail.value);
			this.checked_vakue = e.detail.value;
		},
		// 提交事件
		formSubmit(e) {
			// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			// console.log('选择好的头像路径为：', this.image_srces);
			let filePath = this.image_srces;
			var formdata = e.detail.value;
			var that = this;
			if (this.is_rev == '2') {
				if (!this.pwdReg.test(formdata.password)) {
					uni.showToast({
						title: '密码为4~30位字符！',
						icon: 'none'
					});
				} else if (!this.pwdReg.test(formdata.re_password)) {
					uni.showToast({
						title: '密码为4~30位字符！',
						icon: 'none'
					});
				} else {
					//修改密码
					app.callFunction(
						'update_user',
						{
							password: formdata.password,
							re_password: formdata.re_password
						},
						(data, res) => {
							// uni.hideLoading();
							// console.log('保存成功:', res);
							if (res.success) {
								uni.showToast({
									title: '修改成功'
								});

								that.back();
							} else {
								uni.showToast({
									title: '修改失败,' + res.message,
									icon: 'none'
								});
							}
						}
					);
				}
			} else if (!this.nameReg.test(formdata.text)) {
				uni.showToast({
					title: '用户名为2~16位字符！',
					icon: 'none'
				});
			} else if (!this.pwdReg.test(formdata.password)) {
				uni.showToast({
					title: '密码为4~30位字符！',
					icon: 'none'
				});
			} else {
				if (this.is_rev == '1') {
					// uni.showLoading({
					// 	title: '保存中......',
					// 	mask: true
					// });
					//判断是否是重置接口
					// console.log('重置接口');
					if (that.is_select) {
						//判断是否选择过头像
						//没有重新选择头像时，直接更新
						app.callFunction(
							'update_user',
							{
								_id: that.value_rev._id,
								photo_id: that.value_rev.photo_id,
								name: formdata.text,
								password: formdata.password,
								role: that.checked_vakue
							},
							(data, res) => {
								// uni.hideLoading();
								// console.log('保存成功:', res);
								if (res.success) {
									uni.showToast({
										title: '保存成功'
									});

									that.back();
								}
							}
						);
					} else {
						//重新选择头像时，先上传更新的头像
						app.uploadFile(filePath, res => {
							// console.log('保存成功:', res);
							if (res.success) {
								that.imgData = res;
								let file_id = res.fileID; //上传后的src，将此src提交
								app.callFunction(
									'update_user',
									{
										_id: that.value_rev._id,
										photo_id: file_id,
										name: formdata.text,
										password: formdata.password,
										role: that.checked_vakue
									},
									(data, res) => {
										// uni.hideLoading();
										// console.log('保存成功:', res);
										if (res.success) {
											uni.showToast({
												title: '保存成功'
											});
											// 把更新前上传的图片删除
											app.deleteFile(that.head_img_src, res => {});

											that.back();
										} else {
											uni.showToast({
												title: '保存失败,请联系管理员',
												icon: 'none'
											});
											// 把刚才上传的图片删除
											app.deleteFile(filePath, res => {});
										}
									}
								);
							}
						});
					}
				} else {
					// 新增接口
					// console.log('新增接口');
					// uni.showLoading({
					// 	title: '新增中......',
					// 	mask: true
					// });
					app.uploadFile(filePath, res => {
						// console.log('保存成功:', res);
						if (res.success) {
							that.imgData = res;
							let file_id = res.fileID; //上传后的src，将此src提交
							app.callFunction(
								'add_user',
								{
									photo_id: file_id,
									name: formdata.text,
									password: formdata.password,
									role: that.checked_vakue
								},
								(data, res) => {
									// uni.hideLoading();
									// console.log('保存成功232:', res);
									if (res.success) {
										uni.showToast({
											title: '新增成功'
										});
										// console.log('保存成功:', res);
										that.back();
									} else {
										uni.showToast({
											title: '新增失败,' + res.message,
											icon: 'none'
										});
										// 把刚才上传的图片删除
										app.deleteFile(file_id, res => {});
									}
								}
							);
							// console.log('原路径fileID', that.image_srces);
						} else {
							uni.showToast({
								title: '上传失败,请联系管理员',
								icon: 'none'
							});
						}
					});
				}
			}
		},
		// 清空form数据
		formReset(e) {
			// console.log('清空数据');
			this.head_img_src = '/static/tx.png';
			this.image_srces = '/static/tx.png';
		},
		// 选择本地图片接口
		addImg() {
			var that = this;
			// console.log('原路径1', that.head_img_src);
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
					// console.log('选择的值', res);

					if (that.head_img_src != res.tempFilePaths[0]) {
						//用来判断是否已经选择图片
						that.head_img_src = res.tempFilePaths[0]; //用来更改页面img的值
						that.image_srces = res.tempFilePaths[0]; //此值用来提交
						if (that.is_rev) {
							that.value_rev.photo_id = res.tempFilePaths[0]; //用来更改页面img的值
						}

						that.is_select = false; //隐藏提示
						// console.log('原路径2', that.head_img_src);
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.radio {
	font-size: 40rpx;
	height: 100rpx;
	line-height: 100rpx;
	padding-left: 70rpx;
}
.back {
	font-size: 36rpx;
	font-weight: 500;
	line-height: 48rpx;
	color: rgba(153, 153, 153, 1);
}
.back-hover {
	opacity: 0.4;
}

/* 添加头像区域 */
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	box-sizing: border-box;
	// 图标
	.userinfo-avatar {
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
	}
	// 提示
	.text_hint {
		margin-top: 10px;
		font-size: 30rpx;
		color: #bababa;
	}
}

.form {
	padding: 60rpx;
	display: block;
	.formItem {
		box-sizing: border-box;
		width: 100%;
		height: 112rpx;
		background-color: #f9f9f9;
		font-size: 36rpx;
		padding: 32rpx;
		margin: 20rpx 0;
		border-radius: 56rpx;
		&.submit {
			background-color: #6dddcb;
			color: #ffffff;
			text-align: center;
			font-size: 40rpx;
			line-height: 40rpx;
		}
	}
}
.userImg {
	width: 200rpx;
	height: 200rpx;
	margin-top: 30px;
	border-radius: 100px;
}
.username {
	margin: 60rpx 0;
}
</style>
